<template>
	<view class="zh-wrapper">
		<view class="search-box">
			<view class="back" @click="handleBack"> <view class="nav-bar__text-icon arrow-left"></view></view>
			<view class="flex-1">
				<uni-search-bar placeholder="搜索" bgColor="#ffffff" v-model="searchValue"> </uni-search-bar>
			</view>
		</view>
		<view style="flex: 1; display: flex">
			<scroll-view class="menus" :scroll-into-view="menuScrollIntoView" scroll-with-animation scroll-y>
				<view class="wrapper">
					<view
						class="menu"
						:id="`menu-${item.id}`"
						:class="{ current: index == currentIndex }"
						v-for="(item, index) in goods"
						:key="index"
						@tap="handleMenuTap(item.id, index)"
					>
						<text>{{ item.name }}</text>
					</view>
				</view>
			</scroll-view>
			<scroll-view class="goods" scroll-with-animation scroll-y :scroll-top="cateScrollTop" @scroll="handleGoodsScroll">
				<view class="wrapper">
					<view class="list">
						<view class="items">
							<view class="good" v-for="(good, key) in goods[currentIndex].children" :key="key">
								<image :src="good.icon" class="image"></image>
								<view class="right">
									<text class="name fs-24">{{ good.name }}</text>
								</view>
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script setup lang="ts">
import { ref, nextTick, getCurrentInstance, watch } from "vue"
import { ICateItem } from "./interface"
const props = defineProps<{
	scrollList: ICateItem[]
}>()

const currentIndex = ref(0)
const instance = getCurrentInstance()
const menuScrollIntoView = ref("")
const curCateId = ref(6905)
const cateScrollTop = ref(0)
// 计算高度状态
const sizeCalcState = ref(false)
const goods = ref<ICateItem[]>([])
const searchValue = ref("")

watch(
	() => props.scrollList,
	(newVal) => {
		goods.value = newVal
		nextTick(() => {
			if (newVal && newVal.length > 0) {
				calcSize()
			}
		})
	},
	{
		immediate: true,
		deep: true,
	}
)

// 点击左侧菜单
function handleMenuTap(id: number, index: number) {
	currentIndex.value = index
	if (!sizeCalcState.value) {
		calcSize()
	}

	curCateId.value = id

	nextTick(() => {
		cateScrollTop.value = goods.value.find((item) => item.id == id).top
	})
}

//
function handleGoodsScroll({ detail }) {
	if (!sizeCalcState.value) {
		calcSize()
	}
	const { scrollTop } = detail
	// 此处scrollTop + 1为了处理scrolltop的偏差值
	let tabs = goods.value.filter((item) => item.top <= scrollTop + 1).reverse()
	if (tabs.length > 0) {
		curCateId.value = tabs[0].id
	}
}

function calcSize() {
	// let h = 10
	// goods.value.forEach((item) => {
	// 	let view = uni.createSelectorQuery().in(instance).select(`#cate-${item.id}`)
	// 	view
	// 		.fields(
	// 			{
	// 				size: true,
	// 			},
	// 			(data: any) => {
	// 				item.top = h
	// 				h += data.height
	// 				item.bottom = h
	// 			}
	// 		)
	// 		.exec()
	// })
	// sizeCalcState.value = true
}
function handleBack() {
	uni.navigateBack()
}
</script>

<style lang="scss">
.zh-wrapper {
	height: 100vh;
	overflow: hidden;
	width: 100%;
	display: flex;
	flex-direction: column;
	background-color: #eef1f3;
	.search-box {
		display: flex;
		justify-content: space-between;
		align-items: center;
		.back {
			display: flex;
			justify-content: center;
			align-items: center;
			background-color: #fff;
			height: 36px;
			width: 36px;
			border-radius: 10rpx;
			margin-left: 30rpx;
			margin-right: 10rpx;
			> view {
				position: relative;
				margin-left: 10rpx;
			}
		}
	}
	.menus {
		width: 200rpx;
		height: 100%;
		overflow: hidden;

		.wrapper {
			width: 100%;
			height: 100%;

			.menu {
				display: flex;
				align-items: center;
				justify-content: center;
				padding: 30rpx 20rpx;
				position: relative;

				&:nth-last-child(1) {
					margin-bottom: 130rpx;
				}

				&.current {
					color: #fa2c19;
					display: flex;
					align-items: center;
					text {
						&::after {
							content: "";
							display: inline-block;
							position: absolute;
							left: 0;
							width: 6rpx;
							height: 40rpx;
							background-color: #fa2c19;
						}
					}
				}

				.dot {
					position: absolute;
					width: 34rpx;
					height: 34rpx;
					line-height: 34rpx;
					font-size: 22rpx;
					color: #ffffff;
					top: 16rpx;
					right: 10rpx;
					border-radius: 100%;
					text-align: center;
				}
			}
		}
	}

	.goods {
		flex: 1;
		height: 100vh;
		overflow: hidden;
		background-color: #ffffff;

		.wrapper {
			width: 100%;
			height: 100%;
			padding: 30rpx;

			.list {
				width: 100%;

				padding-bottom: 130rpx;

				:deep(.category) {
					width: 100%;

					.title {
						padding: 30rpx 0;
						display: flex;
						align-items: center;

						.icon {
							width: 38rpx;
							height: 38rpx;
							margin-left: 10rpx;
						}
					}
				}

				:deep(.items) {
					display: flex;
					flex-wrap: wrap;
					padding-bottom: -30rpx;

					.good {
						display: flex;
						flex-direction: column;
						align-items: center;
						justify-content: center;
						margin-bottom: 30rpx;
						width: 33.33%;
						.image {
							width: 128rpx;
							height: 128rpx;
							border-radius: 8rpx;
							margin-bottom: 10rpx;
						}
						.name {
							display: -webkit-box !important;
							overflow: hidden;
							text-overflow: ellipsis;
							word-break: break-all;
							-webkit-line-clamp: 1;
							-webkit-box-orient: vertical !important;
							width: 128rpx;
							text-align: center;
						}
					}
				}
			}
		}
	}
}
</style>
